<template>
    <div>
        <el-form ref="form" :rules="form_rules" :model="form" label-width="120px" size="small">
            <el-form-item label="当前客户名：">
                <p>{{followData.name}}</p>
            </el-form-item>
            <el-form-item label="购买意向：" prop="purchase_intention" v-if="isIntention">
                <el-select v-model="form.purchase_intention">
                    <el-option v-for="item in purchase_intention" :key="item.value_id" :label="item.value_name" :value="String(item.value_id)">{{item.value_name}}</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="跟进方式：" prop="communicate_type">
                <el-radio-group v-model="form.communicate_type">
                    <el-radio v-for="item in communicate_type" :key="item.value_id" :label="String(item.value_id)">{{item.value_name}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="带看房源：" v-if="form.communicate_type === '5'">  <!--  -->
                <div>
                    <el-cascader
                        clearable
                        :options="estate"
                        v-model="estateVal"
                        @active-item-change="handleItemChange"
                        @change="handleChange"
                        >
                    </el-cascader>
                </div>
                <el-tag
                    :key="index"
                    type="success"
                    v-for="(tag, index) in estateLable"
                    closable
                    :disable-transitions="false"
                    @close="closeTag(tag, index)">
                    {{tag.room_details}}
                </el-tag>
            </el-form-item>
            <el-form-item label="跟进内容：" prop="communicate_remark">
                <el-input type="textarea" v-model="form.communicate_remark" :rows="3"></el-input>
            </el-form-item>
            <el-form-item>
                <PhotosUploader
                    class="avatar-uploader"
                    :limit="9"
                    :files.sync="iconUrl">
                </PhotosUploader>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit()">保存</el-button>
                <el-button @click="closeDialog()">取消</el-button>
            </el-form-item>
        </el-form>
        <h3 class="table_title">历史跟进记录：</h3>
        <el-table :data="tableData" style="width: 100%" border>
            <el-table-column prop="created_user_name" label="跟进人"></el-table-column>
            <el-table-column label="跟进方式">
                <template slot-scope="scope">
                    {{getDicVal(scope.row.communicate_type,'communicate_type')}}
                </template>
            </el-table-column>
            <el-table-column label="跟进内容" width="400">
                <template slot-scope="scope">
                    <p>{{scope.row.communicate_remark}}</p>
                    <p v-if="scope.row.communicate_file !==''">
                        <a v-for="(ietm, index) in scope.row.communicate_file.split(',')" :href="ietm" target="_blank">图片{{ index + 1 }} </a> 
                    </p>
                </template>
            </el-table-column>
            <el-table-column prop="created_time" label="跟进时间"></el-table-column>
        </el-table>
    </div>
</template>

<script>
import ContactsAdd from './ContactsAdd'
import PhotosUploader from '@/components/uploader/PhotosUploader'
export default {
    components: {
        ContactsAdd,
        PhotosUploader
    },
    data () {
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            iconUrl: [],
            form: {
                purchase_intention: '', // 购买意向
                communicate_type: '1', //跟进方式
                communicate_remark: '' // 跟进内容
            },
            form_rules: {
                purchase_intention: [
                    { required: true, message: '请选择购买意向', trigger: 'change'}
                ],
                communicate_type: [
                    { required: true, message: '请选择跟进方式', trigger: 'change'}
                ],
                communicate_remark: [
                    { required: true, message: '跟进内容不能为空', trigger: 'blur'}
                ]
            },
            tableData: [],
            purchase_intention: [], // 字典 - 购买意向
            communicate_type: [{
                value_id: '1',
                value_name: '电话跟进'
            },{
                value_id: '2',
                value_name: '上门拜访'
            },{
                value_id: '3',
                value_name: '来访接待'
            },{
                value_id: '4',
                value_name: '网络跟进'
            },{
                value_id: '5',
                value_name: '带看房源'
            },{
                value_id: '6',
                value_name: '活动邀约'
            },{
                value_id: '7',
                value_name: '其它'
            }], // 跟进方式
            estateVal: [],
            estateLable: [],
            estate: [] // 房产数据
        }
    },
    props: {
        followData: {
            type: Object
        },
        isIntention: { // 是否传 购买意向
            type: Boolean,
            default: true
        }
    },
    created() {
        let _this = this;
        this.$https.all([
            this.getDic('crm_purchase_intention', 'purchase_intention')
        ]).then(this.$https.spread(function (acct, perms) {
            _this.getDataList();
            if (_this.isIntention) {
                _this.form.purchase_intention = _this.followData.type;
            } else {
                _this.form.purchase_intention = '0';
            }

            _this.getProjects(); // 获取房产
            
        }))
    },
    methods: {
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        getDataList() { // 获取数据列表

            this.$https.get('/api/customer_communicate/list_customer_communicate?c_id=' + this.followData.id).then((result) => {
                if (result.data.code == 0) {
                    this.tableData = result.data.data;
                } else {
                    this.$message({
                        type: 'error',
                        showClose: true,
                        message: result.data.message
                    })
                }
            })
        },
        getProjects() { // 获取房产项目
            this.$https.get('/api/pms_base_projects/GetProjects', {
                params: {
                    page: 1,
                    page_size: 999,
                }
            }).then((result) => {
                if (result.data.code == 0) {
                    for(var item of result.data.data.Items) {
                        let _item = {
                            value: item.project_id,
                            label: item.project_name,
                            children: []
                        }
                        this.estate.push(_item);
                    }
                } else {
                    this.$message({
                        type: 'error',
                        showClose: true,
                        message: result.data.message
                    })
                }
            })
        },
        getBuildings(project_id) { // 获取楼宇
            this.$https.get('/api/pms_base_buildings/GetBuildings', {
                params: {
                    page: 1,
                    page_size: 999,
                    project_id: project_id
                }
            }).then((result) => {
                if (result.data.code == 0) {
                    // 遍历项目
                    for(let i = 0; i < this.estate.length; i++) {
                        // 如果项目值与选中的 id 相等 则遍历楼宇列表填充到当前项目的 children 中
                        if (this.estate[i].value === project_id) {
                            this.estate[i].children = []; // 每次遍历前置空
                            for(let item of result.data.data.Items) {
                                let _item = {
                                    value: item.building_id,
                                    label: item.building_name,
                                    children: []
                                }
                                this.estate[i].children.push(_item);
                            }
                        }
                    }
                } else {
                    this.$message({
                        type: 'error',
                        showClose: true,
                        message: result.data.message
                    })
                }
            })
        },
        getFloors(project_id, building_id) { // 获取房间
            this.$https.get('/api/pms_base_floors/GetFloors', {
                params: {
                    page: 1,
                    page_size: 999,
                    building_id: building_id
                }
            }).then((result) => {
                if (result.data.code == 0) {

                    // 遍历项目
                    for(let i = 0; i < this.estate.length; i++) {

                        // 如果项目值与选中的项目 id 相等 则遍历楼宇列表
                        if (this.estate[i].value === project_id) {

                            for (let j = 0; j <this.estate[i].children.length; j++) {
                                // 如果楼宇值与选中的楼宇 ID 相等
                                if (this.estate[i].children[j].value === building_id) {
                                    // 则遍历结果 添加到 当前楼宇
                                    this.estate[i].children[j].children = []; // 每次遍历前置空
                                    for(let item of result.data.data.Items) {
                                        let _item = {
                                            value: item.floor_id,
                                            label: item.floor_name,
                                            children: []
                                        }
                                        this.estate[i].children[j].children.push(_item);
                                    }
                                }
                            }
                            
                        }
                    }
                } else {
                    this.$message({
                        type: 'error',
                        showClose: true,
                        message: result.data.message
                    })
                }
            })
        },
        getRooms(project_id, building_id, floor_id) { // 获取房间

            this.$https.get('/api/pms_base_rooms/GetRooms', {
                params: {
                    page: 1,
                    page_size: 999,
                    floor_id: floor_id
                }
            }).then((result) => {
                if (result.data.code == 0) {
                    
                    // 遍历项目
                    for(let i = 0; i < this.estate.length; i++) {

                        // 如果项目值与选中的项目 id 相等 则遍历楼宇列表
                        if (this.estate[i].value === project_id) {

                            for (let j = 0; j <this.estate[i].children.length; j++) {
                                // 如果楼宇值与选中的楼宇 ID 相等
                                if (this.estate[i].children[j].value === building_id) {

                                    // 则遍历楼层信息
                                    for (let k = 0; k <this.estate[i].children[j].children.length; k++) {

                                        // 如果楼宇值与选中的楼层 ID 相等
                                        if (this.estate[i].children[j].children[k].value === floor_id) {
                                            // 则遍历结果 添加到 当前楼宇
                                            this.estate[i].children[j].children[k].children = []; // 每次遍历前置空
                                            for(let item of result.data.data.Items) {
                                                let _item = {
                                                    value: item.room_id,
                                                    label: item.room_name
                                                }
                                                this.estate[i].children[j].children[k].children.push(_item);
                                            }
                                        }
                                    }
                                }
                            }
                            
                        }
                    }
                } else {
                    this.$message({
                        type: 'error',
                        showClose: true,
                        message: result.data.message
                    })
                }
            })
        },
        handleItemChange(val) {
            let activeItemLen = val.length;
            if (activeItemLen === 1) {
                this.getBuildings(val[0]);
            } else if (activeItemLen === 2) {
                this.getFloors(val[0], val[1]);
            } else if (activeItemLen === 3) {
                this.getRooms(val[0], val[1], val[2]);
            } else if (activeItemLen === 4) {

            }
        },
        handleChange() {
            let selectObj = this.getCascaderObj(this.estateVal, this.estate);

            if (selectObj.length !== 0) { // 非清空值
                let _room_names =  selectObj[0].label + '#' + selectObj[1].label + '#' + selectObj[2].label + '#' + selectObj[3].label;
                let _item = {
                    cc_id: 0,
                    room_id: selectObj[3].value,
                    room_details: _room_names
                }
                if (this.estateLable.length !== 0) {
                    let estateIds = [];
                    for (let estateItem of this.estateLable) {
                        estateIds.push(estateItem.room_id);
                    }
                    let estateL = estateIds.length + 1;
                    if (estateIds.indexOf(_item.room_id, -estateL) === -1) {
                        this.estateLable.push(_item);
                    }
                } else {
                    this.estateLable.push(_item);
                }
                
            }
        },
        closeTag(tag, i) {
            this.estateLable.splice(i, 1); // 删除标签
        },
        submit() { // 提交
            this.$refs.form.validate((valid) => {
                if (valid) {
                    let _postData = JSON.parse(JSON.stringify(this.form));

                    if (_postData.communicate_type === '5') {

                        if (this.estateLable.length === 0) {
                            this.$message({
                                type: 'error',
                                showClose: true,
                                message: '请选择带看的房源'
                            })
                            return;
                        } else {
                            _postData.list_customer_communicate_room = this.estateLable;
                        }
                    }

                    _postData.c_id = this.followData.id;
                    _postData.communicate_file = this.iconUrl.join(',');

                    console.log(_postData);
                    this.$https.post('/api/customer_communicate/create_customer_communicate', _postData).then((result) => {
                        if (result.data.code == 0) {
                            this.$message({
                                type: 'success',
                                showClose: true,
                                message: '新增成功',
                                duration: 1000,
                                onClose: () => {
                                    // 刷新列表
                                    this.getDataList();
                                    this.form.communicate_type = '1';
                                    this.form.communicate_remark = '';
                                    this.iconUrl = [];
                                    this.estateLable = [];
                                    this.estateVal = [];
                                }
                            })
                        } else {
                            this.$message({
                                type: 'error',
                                showClose: true,
                                message: result.data.message
                            })
                        }
                    })
                    

                } else {
                    console.error('验证失败');
                    return false;
                }
            });
        },
        getDic(code, dic) { // 根据关键字获取字典值并保存 相应字段
            this.$https.get('/api/Dicts/GetValues', {
                params: {
                    type_code: code
                }
            }).then((result) => {
                if (result.data.code == 0) {
                    this[dic] = result.data.data;
                } else {
                    this.$message({
                        type: 'error',
                        showClose: true,
                        message: result.data.message
                    })
                }
            })
        },
        getDicVal(key, dic) { // 根据字典值匹配字典名
            let text = '';
            for(var item of this[dic]) {
                if (key == item.value_id) {
                    text = item.value_name;
                }
            }
            return text;
        },
        closeDialog(name) { // 关闭当前
            // this.$refs.form.resetFields(); // 重置表单
            if (!name) {
                this.$emit('closeDialog', 'dialogFollowUp'); // 执行父组件关闭方法
            } else {
                this.$emit('closeDialog', name); // 执行父组件关闭方法
            }
        }
    }
}
</script>
<style scoped>
    .avatar-uploader {
        display: block;
    }
    .avatar-uploader /deep/ .el-upload {
        width: 90px;
        height: 90px;
        line-height: 100px;
    }
    .avatar-uploader /deep/ .el-upload-list__item {
        width: 90px;
        height: 90px;
    }
    .avatar-uploader /deep/ .el-progress,.avatar-uploader /deep/ .el-progress-circle {
        width: 70px !important;
        height: 70px !important;
    }
    /* el-progress--circle */
    .table_title {
        display: inline-block;
        margin-top: 30px;
        margin-bottom: 30px;
        color: #666;
        font-weight: normal;
        padding-left: 5px;
        border-left: 2px solid #4E97D9;
        line-height: 1.2;
    }

    .el-tag {
        margin-top: 5px;
        margin-right: 10px;
    }
</style>